<template>
<section>
  <div class="body">
  <fieldset style="margin-top: 20px;border-bottom: none;border-left: none;border-right: none;border-color:#fdfdfe">
    <legend style="font-size: 20px">导入学生信息</legend>
  </fieldset>
  <el-form>
    <el-form-item label="所属系">
      <el-select placeholder="选择系" v-model="departvalue" clearable @change="choosemajor(departvalue)">
        <el-option
          v-for="item in departmentList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select placeholder="选择专业" v-model="majorvalue" clearable @change="chooseclass(majorvalue)">
        <el-option
          v-for="item in majorList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select placeholder="选择班级" v-model="classvalue" clearable>
        <el-option
          v-for="item in classList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-button class="el-icon-refresh" size="small" type="success" @click="renew()">刷新</el-button>
      <el-button class="el-icon-search" size="small" type="success">筛选</el-button>
      <el-button class="el-icon-circle-plus-outline" size="small" type="success">添加</el-button>
    </el-form-item>
    <el-form-item label="导入学生">
      <el-button class="el-icon-upload"  type="primary">上传文件</el-button>
      <!--若失败自动触发此按钮-->
      <a id="errorData" style="display: none" >查看导入错误数据</a>
      <el-button size="small" type="primary">下载导入数据模板</el-button>
    </el-form-item>
  </el-form>
  <fieldset style="margin-top: 20px;border-color:#fdfdfe">
    <legend style="font-size: 20px">学生信息</legend>
    <el-table border="true" :data="studentInfoList" header-row-style="font-size: 20px;color:black;">
      <el-table-column label="班级"  prop="class.name"></el-table-column>
      <el-table-column label="学号" prop="user.workid"></el-table-column>
      <el-table-column label="姓名" prop="user.realname"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button  size="small" type="success">编辑</el-button>
          <el-button  size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </fieldset>

  <!--工具条-->
  <el-col :span="24" class="toolbar">
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :page-sizes="pageSizes"
                   :page-size="pageSize" :total="total" style="float:right;">
    </el-pagination>
  </el-col>
  </div>
</section>
</template>

<script>
  import API from '@/api'
    export default {
        name: "student",
      data(){
          return{
            // 分页数据列表--start
            total: 0,
            pageIndex: 1, //页码
            pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
            pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表

            // 分页数据列表--end

            listLoading: false, //是否显示加载动画
            userid:'',
            useidInfo:{},
            schoolid:'',
            departmentList:[],
            studentInfoList:[],
            majorList:[],
            classList:[],
            departvalue:'',
            majorvalue:'',
            classvalue:'',
          }
      },
      methods:{

        //分页
        handleSizeChange(val) { //改变分页大小
          this.pageSize = val;
          this.getuseidInfo();
        },
        handleCurrentChange(val) { //页码跳转
          this.pageIndex = val;
          this.getuseidInfo();
        },
        renew(){
          this.handleCurrentChange(1);
        },
        getuseidInfo(){
          this.userid = JSON.parse(localStorage.getItem("CurrentUser"));//获取userid
          console.log(this.userid);
          API.user.findOneById(this.userid).then(res=>{
            this.useidInfo=res.data.data;
            this.getdepartmentList();
            this.getstudentInfoList();
            console.log(this.departmentList);
          }).catch(error=>{
            console.log(error);
          })
        },
        getdepartmentList(){
          this.departmentList=[];
          API.department.dindDetailBatch(this.useidInfo.schoolid).then(res=>{
            for(let i=0;i<res.data.data.length;i++){
              if(res.data.data[i].type!=3){
                this.departmentList.unshift(res.data.data[i]);
              }
            }
          }).catch(error=>{
            console.log(error);
          });
        },
        getstudentInfoList(){
          this.listLoading = true;
          let para= {
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            user:{
              universityid:this.useidInfo.universityid,
            },
            studentInfo:{
              schoolid:this.useidInfo.schoolid,
              departmentid:this.departvalue,
              majorid:this.majorvalue,
              classid:this.classvalue,
            },

          };
          API.student.findBatchByCondition(para).then(res=>{
            this.listLoading = false;
            this.total=res.data.total;
            this.studentInfoList=res.data.data;
          }).catch(error=>{
            console.log(error);
            this.listLoading = false;
          })
        },
        choosemajor(val){
          for(let i=0;i<this.departmentList.length;i++){
            if(this.departmentList[i].id===val){
              this.majorList=this.departmentList[i].majorList;
              this.majorvalue='';
              this.classvalue='';
              break;
            }
            else{
              this.majorList=[];
              this.classList=[];
              this.majorvalue='';
              this.classvalue='';
            }
          }
        },
        chooseclass(val){
          for(let i=0;i<this.majorList.length;i++){
            if(this.majorList[i].id===val){
              this.classList=this.majorList[i].classList;
              this.classvalue='';
              break;
            }
            else{
              this.classList=[];
              this.classvalue='';
            }
          }
        },
      },
      mounted(){
        this.getuseidInfo();
      }
    }
</script>

<style scoped>
.body{
  text-align: left;
}
</style>
